import React, { Component } from 'react';
import 'antd/dist/antd.css';//需要添加样式
import {findCourseList} from '../utils/api';
import {Button, Descriptions} from 'antd';
import { EditOutlined } from '@ant-design/icons';
import { Table, Modal,Input,Radio, Form } from 'antd';

class NewStudentTable extends Component {
    constructor(props) {
        super(props);
        this.query = this.props.location.query;//传入的参数
        if(!this.query){
            this.query={
                class:"2017240602",
                coursename:"软件详细设计",
                term:'2020-2021第一学期',
            }
        }
        /**
         * 参数列表：
         * URL：数据接口
         * term：学期
         * class:班级
         * usernumber：用户名
         */
        this.state = {
            coursename:this.query.coursename,
            class:this.query.class,
            term:this.query.term,
            username:this.props.username,
            data:[],
            columns:[
                {
                    title: '学号',
                    dataIndex: 'studentid',
                },
                {
                    title: '学生名',
                    dataIndex: 'studentname',
                },
                {
                    title: '平时成绩',
                    dataIndex: 'usual',
                },
                {
                    title: '实验成绩',
                    dataIndex: 'experiment',
                },
                {
                    title: '卷面成绩',
                    dataIndex: 'exam',
                },
                {
                    title: '最终成绩',
                    dataIndex: 'result',
                },
                {
                    title: '操作',
                    dataIndex: 'action',
                    render: (text, record) =>
                        <div>
                            <Button
                                type='primary'
                                shape='round'
                                icon={<EditOutlined/>}
                                onClick={(e) => this.handleInputBtnClick(e, record)}
                            >
                                修改成绩
                            </Button>
                        </div>
                }
            ],
        }
    }
    /**
     * 处理“录入成绩”按钮点击事件
     * @param {当前行的数据} record
     */
    handleInputBtnClick = (event,record)=>{
        //console.log(record);
        //路由跳转
        this.props.history.push({
            pathname:'/NewStudentTable',
            query:record
        });

    }
    /**
     * 初始化数据
     */
    componentDidMount() {
        //测试数据
        this.setState({
            data: [{
                "_id": "5f4e1e3102e91822e86f38da",

                "studentid": "2017905655",
                "studentname": "李青翰",
                "usual": "70",
                "experiment": "80",
                "exam": "75",
                "result": "72",
                "term": "2020-2021第一学期",
                //"gradepecents": null
            }]
        })
    }

    render() {
        return (
            <div>
                <Descriptions title="选择班级">
                    <Descriptions.Item label="学期">{this.state.term}</Descriptions.Item>
                    <Descriptions.Item label="课程">{this.state.coursename}</Descriptions.Item>
                    <Descriptions.Item label="班级">{this.state.class}</Descriptions.Item>
                </Descriptions>
            <Table
                columns={this.state.columns}
                dataSource={this.state.data}
                rowKey={(record)=>record['_id']}//使用_id作为行key
            />
            </div>
        );
    }
}

export default NewStudentTable;